import React from 'react';
import { useNavigate } from 'react-router-dom';
import axios from '../../utils/http';
import logo from '../../assets/img/logo.png';
import ProjectPopover from './projectPopover';
import UserPopover from './userPopover';
import './header.less';

const Header = () => {
  const navigate = useNavigate();

  //退出登录
  const logout = async () => {
    await axios.post('/api/logout');
    navigate('./login');
  };

  //点击之后回到project页面
  const home_click = () => {
    navigate('/project');
  };

  return (
    <div className='header_wrap_body'>
      <button className='header_button' onClick={home_click}>
        <img className='header_logo' src={logo} alt='logo'></img>
        <h2>九剑scrum项目管理系统</h2>
      </button>
      <ProjectPopover />
      <UserPopover />
      <div onClick={logout} className='header_login_out_btn'>
        退出登录
      </div>
    </div>
  );
};

export default Header;
